<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<style type="text/css">
     .like-ani{
        -webkit-animation-name:likeani;
        animation-name:likeani;
        -webkit-animation-duration: .8s;
        animation-duration: .8s;
        -webkit-animation-timing-function:ease-in-out;
        animation-timing-function:ease-in-out;
    }
    .unlike-ani{
        -webkit-animation-name:unlikeani;
        animation-name:unlikeani;
        -webkit-animation-duration: .8s;
        animation-duration: .8s;
        -webkit-animation-timing-function:ease-in-out;
        animation-timing-function:ease-in-out;
    }
    .miniicon{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%) scale(1);
        display: block;
        color: red;
        z-index: -555;
        opacity: 0;
        
    }
    .icon-ani1{
        -webkit-animation-name:iconani1;
        animation-name:iconani1;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function:ease-in-out;
        animation-timing-function:ease-in-out;
    }
    .icon-ani2{
        -webkit-animation-name:iconani2;
        animation-name:iconani2;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function:ease-in-out;
        animation-timing-function:ease-in-out;
    }
    .icon-ani3{
        -webkit-animation-name:iconani3;
        animation-name:iconani3;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function:ease-in-out;
        animation-timing-function:ease-in-out;
    }
    @-webkit-keyframes likeani{
        0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,68,68);}
        60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,20,20);}
        90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
        100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,0,0);}
        
    }
    @keyframes likeani{
        0% {-webkit-transform: scale(1);transform: scale(1);color: rgb(255,68,68);}
        60%{-webkit-transform: scale(1.2);transform: scale(1.2);color: rgb(255,20,20);}
        90%{-webkit-transform: scale(0.9);transform: scale(0.9);}
        100%{-webkit-transform: scale(1);transform: scale(1);color: rgb(255,0,0);}
        
    }
    @-webkit-keyframes unlikeani{
        0% {-webkit-transform: scale(0.8);transform: scale(0.8);}
        60%{-webkit-transform: scale(1.1);transform: scale(1.1);}
        100%{-webkit-transform: scale(1);transform: scale(1);}
        
    }
    @keyframes unlikeani{
        0% {-webkit-transform: scale(0.8);transform: scale(1);}
        40%{-webkit-transform: scale(1.1);transform: scale(1.1);}
        100%{-webkit-transform: scale(1);transform: scale(1);}
        
    }
    @-webkit-keyframes iconani1{
        0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
        50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
        100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
    }
    @keyframes iconani1{
        0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
        50%{-webkit-transform:translate(-50px,-60px) scale(0.9);transform:translate(-50px,-60px) scale(0.9);opacity: 0.6;}
        100%{-webkit-transform:translate(-50px,-100px) scale(0);transform:translate(-50px,-100px) scale(0);opacity: 1;}
    }
    @-webkit-keyframes iconani2{
        0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
        50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
        100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
    }
    @keyframes iconani2{
        0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
        50%{-webkit-transform:translate(0px,-60px) scale(0.9);transform:translate(0px,-60px) scale(0.9);opacity: 0.5;}
        100%{-webkit-transform:translate(0px,-100px) scale(0);transform:translate(0px,-100px) scale(0);opacity: 1;}
    }
    @-webkit-keyframes iconani3{
        0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
        50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
        100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
    }
    @keyframes iconani3{
        0% {-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1);opacity: 0;}
        50%{-webkit-transform:translate(40px,-60px) scale(0.9);transform:translate(40px,-60px) scale(0.9);opacity: 0.5;}
        100%{-webkit-transform:translate(40px,-100px) scale(0);transform:translate(40px,-100px) scale(0);opacity: 1;}
    }
</style>



<div class="like " style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">
    <!-- 嵌入layui的字体图标 -->
    <!-- 组件文档 "https://www.layui.com/doc/element/icon.html" -->
    <i class="likeicon layui-icon layui-icon-heart" data-anilike='like-ani' data-aniunlike='unlike-ani' data-iconfill='layui-icon-heart-fill' style="font-size: 100px;color: red;cursor: pointer;display: block;"></i> 
    <i class="miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani1'></i> 
    <i class="miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani2'></i> 
    <i class="miniicon layui-icon layui-icon-heart-fill" data-ani='icon-ani3'></i> 
</div>

<script type="text/javascript">
    //取得小红心的jq对象
    var miniicon=$('.miniicon');
    $('.likeicon').on('click',function(){
    	var likethis=$(this),
    	iconfill=likethis.data('iconfill'),
    	anilike=likethis.data('anilike'),
    	aniunlike=likethis.data('aniunlike');
    	//去掉空心红心的字体图标
    	likethis.removeClass('layui-icon-heart');
    	//如果当前是实心红心，将实心红心更换为空心，并添加取消点赞的动画
    	if (likethis.hasClass(iconfill)) {
    		likethis.removeClass(iconfill)
    		.addClass('layui-icon-heart')
    		.removeClass(anilike)
    		.addClass(aniunlike);
    		miniicon.each(function(){
    			$(this).removeClass($(this).data('ani'));
    		});
    	//否则添加实心红心的字体图标，实现点赞的动画	 
        }else{
            likethis.removeClass(aniunlike).addClass(iconfill).addClass(anilike);
            miniicon.each(function(){
               $(this).addClass($(this).data('ani'));
            });
        }

    });

</script>